<template>
	<view class="my-info" v-if="obj">
		<view class="mi-show-head">
		  <u-image class="head-img" width="100%" height="400rpx" :src="`${staticUrl}/user-bg.png`"></u-image>
		</view>
		
		<view class="user-info">
			<view class="user-head-img">
				<u-cell-group :border="false">
					<u-cell-item 
						@click="exitPs.show = true"
						title="头像" 
						:border-bottom="false"
						:arrow="false"
						hover-class="none"
						:title-style="iconStyle">
						<u-icon slot="icon" :width="38" :height="38" name="/static/icons/head-img.png"></u-icon>
						<!-- <u-image slot="right-icon" border-radius="10" width="80" height="80" :src="obj.headImg"></u-image> -->
						<open-data class="h-img" type="userAvatarUrl" :default-avatar="obj.headImg"></open-data>
					</u-cell-item>
				</u-cell-group>
			</view>
			
			<view class="user-items">
				<u-cell-group :border="false">
					<u-cell-item 
						title="手机号" 
						:arrow="false"
						:value="obj.phone"
						hover-class="none"
						:title-style="iconStyle">
						<u-icon slot="icon" :width="34" :height="100" name="/static/icons/phone.png"></u-icon>
					</u-cell-item>
					
					<u-cell-item 
						title="姓名" 
						:arrow="false" 
						:value="obj.realName"
						hover-class="none"
						:title-style="iconStyle">
						<u-icon slot="icon" :width="34" :height="34" name="/static/icons/name.png"></u-icon>
					</u-cell-item>
					
					<u-cell-item 
						title="昵称" 
						:arrow="false"
						hover-class="none"
						:title-style="iconStyle">
						<u-icon slot="icon" :width="34" :height="34" name="/static/icons/nick-name.png"></u-icon>
						<view slot="right-icon">
							<open-data v-if="!obj.nickName" type="userNickName"></open-data>
							<text v-else>{{obj.nickName}}</text>
						</view>
					</u-cell-item>
					
					<u-cell-item 
						title="主驾车辆" 
						:arrow="false"
						:value="obj.plateNum || '未设置'"
						hover-class="none"
						:title-style="iconStyle">
						<u-icon slot="icon" :width="34" :height="34" name="/static/icons/plate-num.png"></u-icon>
					</u-cell-item>
					
					<u-cell-item 
						title="单位名称" 
						:arrow="false"
						:value="obj.companyName"
						hover-class="none"
						:title-style="iconStyle">
						<u-icon slot="icon" :width="34" :height="34" name="/static/icons/unit-name.png"></u-icon>
					</u-cell-item>
					
					<u-cell-item 
						title="单位编号" 
						:arrow="false"
						:value="obj.companyNum"
						hover-class="none"
						:title-style="iconStyle">
						<u-icon slot="icon" :width="34" :height="34" name="/static/icons/unit-num.png"></u-icon>
					</u-cell-item>
					
					<u-cell-item
						title="我的位置" 
						:border-bottom="false"
						:arrow="false"
						:value="obj.address || '查看当前位置'"
						:title-style="iconStyle"
						@click="openCurMap"
						:value-style="{'overflow': 'hidden', 'white-space': 'nowrap', 'text-overflow': 'ellipsis'}">
						<u-icon slot="icon" :width="34" :height="34" name="/static/icons/cur-point.png"></u-icon>
					</u-cell-item>
				</u-cell-group>
			</view>
			
			<!-- <view class="exit-sys">
				<u-button 
					ripple="true"
					ripple-bg-color="#17effb"
					hover-class="none" 
					:custom-style="{'background-color': '#00c3ce'}" 
					type="primary">
					退出登录
				</u-button>
			</view> -->
			
		</view>
		
		<u-toast ref="miToast" />
		<u-action-sheet 
			border-radius="10" 
			:list="exitPs.list" 
			@click="exitSys" 
			v-model="exitPs.show"
		></u-action-sheet>
		
		<u-modal 
			title="退出登录提示" 
			:confirm-style="{'color': '#00c3ce'}"
			v-model="exitMd.state" 
			:show-cancel-button="true" 
			@confirm="confmExitSys">
			<view class="c-yellow" :style="{'padding': '20rpx'}">退出登录之后，某些功能将无法正常使用，确认要退出吗？</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 网络静态资源地址
				staticUrl: this.C.staticNetUrl,
				// 登录用户信息对象
				obj: null,
				// 图标样式
				iconStyle: {'margin-left': '20rpx', 'color': '#00c3ce'},
				// 退出参数对象
				exitPs: {
					show: false,
					list: [
						{
							text: '退出登录',
							color: '#333333',
							fontSize: 28
						}
					]
				},
				// 退出登录确认弹框
				exitMd: {
					state: false
				},
			}
		},
		onLoad(){
			const that = this;
			
			this.getLuserInfo();
		},
		// 返回按钮周期函数
		onBackPress(){
			uni.switchTab({ url: '/pages/tabbar/my/my' });
			
			return true;
		},
		methods: {
			/** 获取-登录用户信息 */
			getLuserInfo(){
				const that = this, U = that.U;
				
				that.$u.api.getLuserInfo({}).then(res => {
					if (res.code == 1){
						that.obj = res.data;
					  
						// 获取缓存的微信登录信息
						let lo = uni.getStorageSync(that.C.WX_LINFO);
						console.log('缓存的登录信息', lo);
						if(lo){
							if(lo) lo = JSON.parse(lo);
						  
							// 微信头像
							that.obj.headImg = lo.avatarUrl;
						  
							// 微信昵称
							that.obj.nickName = lo.nickName;
						  
							// 位置信息
							let obj = U.getLngLat();
							// console.log('位置信息sss', obj);
							let area = '', address = '', lng = '', lat = '';
							if(obj){
								// 详细地址
								if(obj.address){
									let addr = obj.address.split('=');
									area = `${addr[0]}${addr[1]}`;
									address = `${addr[2]}${addr[3]}${addr[4]}${addr[5]}`;
								}
								
								// 坐标
								if(obj.lng && obj.lat){
									lng = obj.lng;
									lat = obj.lat;
								}
							}
							that.obj.area = area;
							that.obj.address = address;
							that.obj.lng = lng;
							that.obj.lat = lat;
						}
						console.log('最终信息', that.obj);
					}
				});
			},
			// 查看当前位置地图
			openCurMap(){
				const that = this;
				
				uni.chooseLocation({
				    success: function (res) {
				        // console.log('位置名称：' + res.name);
				        // console.log('详细地址：' + res.address);
				        // console.log('纬度：' + res.latitude);
				        // console.log('经度：' + res.longitude);
						
						let o = {...that.obj};
						o.address = res.name;
						o.lng = res.longitude;
						o.lat = res.latitude;
						that.obj = o;
				    }
				});
				
				// // 方式二
				// if(!this.obj.address){
				// 	// 方式一
				// 	uni.chooseLocation({
				// 	    success: function (res) {
				// 	        console.log('位置名称：' + res.name);
				// 	        console.log('详细地址：' + res.address);
				// 	        console.log('纬度：' + res.latitude);
				// 	        console.log('经度：' + res.longitude);
				// 	    }
				// 	});
				// }else{
				// 	uni.openLocation({
				// 		latitude: parseFloat(this.obj.lat),
				// 		longitude: parseFloat(this.obj.lng),
				// 		name: '我的位置',
				// 		address: `${this.obj.area}${this.obj.address}`,
				// 		success: function () {
				// 			console.log('打开当前地址：成功');
				// 		}
				// 	});
				// }
			},
			// 退出登录
			exitSys(){
				const that = this, U = that.U;
				
				// 显示弹框
				that.exitMd.state = true;
				
				// U.qconfim('退出登录之后，某些功能将无法正常使用，确认要退出吗？', (e) => {
				// 	if(e.cancel){// 取消
				// 		that.$refs.miToast.show({
				// 			title: '谢谢您的信任！',
				// 			type: 'success'
				// 		});
				// 	}else if(e.confirm){// 确认
				// 		U.qloading('退出中...');
				// 		that.$u.api.logout().then(res => {
				// 			U.qclose();
							
				// 			if(res.code != 1){
				// 				U.qerror(res.msg);
				// 			}else{
				// 				that.$refs.miToast.show({
				// 					title: '期待下次与您相见！',
				// 					type: 'error',
				// 					icon: false,
				// 					callback: function(){
				// 						// 清空缓存
				// 						uni.setStorageSync(that.C.uuid, '');
										
				// 						uni.redirectTo({
				// 							url: '/pages/common/index/index'
				// 						})
				// 					}
				// 				});
				// 			}
				// 		}).catch(err => { U.qclose(); });
				// 	}
				// });
			},
			// 确认退出登录
			confmExitSys(){
				const that = this, U = that.U;
				
				U.qloading('退出中...');
				that.$u.api.logout().then(res => {
					if(res.code == 1){
						that.$refs.miToast.show({
							title: '期待下次与您相见！',
							type: 'error',
							icon: false,
							callback: function(){
								// 隐藏弹框
								that.exitMd.state = false;
								
								// 清空缓存
								uni.setStorageSync(that.C.uuid, '');
								uni.clearStorageSync();
								uni.reLaunch({
									url: '/pages/common/index/index'
								})
							}
						});
					}else{
						U.qerror(res.msg);
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.my-info{
	height: 100vh;
	background: #f8f8f8;
	position: relative;
	
	// 用户信息
	.user-info{
		padding-top: 80rpx;
		
		.h-img{
			margin-right: 50rpx;
			overflow: hidden;
			display: block;
			width: 80rpx;
			height: 80rpx;
			margin: 20rpx;
			border-radius: 50%;
			border: 4rpx solid #fff;
			box-shadow: 6rpx 6rpx 20rpx rgba(0, 0, 0, 0.2);
			position: absolute;
			bottom: -10rpx;
			right: 0rpx;
		}
		
		// 项的高度样式
		.u-border-bottom{
			padding: 16rpx 32rpx !important;
		}

		// 用户头像项
		.user-head-img{
			width: calc(100% - 40rpx);
			margin: 0 20rpx;
			position: absolute;
			top: 340rpx;
			padding: 4rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
		
		.user-items{
			width: calc(100% - 40rpx);
			margin: 0 auto;
			padding: 4rpx 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
	
		// 退出按钮
		.exit-sys{
			width: calc(100% - 40rpx);
			margin: 0 auto;
			margin-top: 20rpx;
			
			.exit-sys-btn{
				background-color: #00c3ce !important;
			}
		}
	}
}
</style>
